<template>
	<view class="login">

		<view class="login-head flex-y">
			<text class="login-head-h1">绑定手机号</text>
			<text class="login-head-h2">欢迎来到 {{ name }}</text>
		</view>

		<view class="login-body flex-y">

			<view class="flex-center">
				<text class="login-body-name">绑定手机号</text>
			</view>

			<view class="login-body-item">
				<text class="login-body-label">手机号：</text>
				<input class="flex-1" placeholder="请输入您的手机号" confirm-type='next' inputmode="email" maxlength="11"
					v-model="form.phone" style="color:#fff" />
			</view>

			<view class="login-body-item">
				<text class="login-body-label">验证码：</text>

				<input class="flex-1" placeholder="短信验证码" confirm-type='done' inputmode="email" maxlength="6"
					v-model="form.verify" style="color:#fff" @confirm="doBind" />

				<uv-button type="error" @click="showImageVerify" :text="verify.tips" :plain="true" :hairline="false"
					custom-style="border:none;background:none;padding:0;height:auto" />
			</view>

			<view style="margin-top:80rpx;" class="flex-center">
				<uv-button type="success" shape="circle" size="large" @click="doBind"
					custom-style="width:600rpx;height:100rpx" text="绑 定" />
			</view>

		</view>

		<view class="login-foot">
			<view class='login-foot-agent flex-center tn-p-xl'>
				<uv-checkbox-group :value="agent">
					<uv-checkbox shape="circle" activeColor="green" labelSize="26rpx" labelColor="#01beff" label="同意协议"
						:name="true" :checked="agent[0]" />
					<text @click="showAgreenment = true">《用户隐私协议》</text>
				</uv-checkbox-group>
			</view>
		</view>

		<m-show-agreement v-model:show="showAgreenment" @change="agentChange" />
		<m-show-verify-image v-model:show="showImageVerifyModal" @success="doSend" />


	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaCache, TaToast, TaIsWeChat, TaDataUser } from '@/utils';

export default defineComponent({
	data() {
		return {
			// 表单数据
			form: <any>{
				phone: '',
				verify: ''
			},
			// 短信验证
			verify: <any>{
				time: 0,
				tips: '获取验证码',
				idxs: 0,
			},
			// 应用名称
			name: <string>import.meta.env.APP_NAME,
			// 同意协议
			agent: <any[]>[true],
			// 显示协议
			showAgreenment: <boolean>false,
			// 图片验证
			showImageVerifyModal: <boolean>false,
		}
	},
	created() {
		// 检查本地是否存在
		if (!TaDataUser.local.token()) {
			return TaDataUser.logout();
		}
		// 短信发送时间处理
		let timeout = TaCache.get('LoginSmsTimeout') || 0;
		timeout > 0 && this.showTimeout(timeout);
		// #ifdef H5
		// @ts-ignore 检查微信资料是否完成
		if (TaIsWeChat() && !WeChatFansInfo.headimgurl) {
			// @ts-ignore 在 index.html 定义的完整授权方法
			console.log('DoLogin')
			// window.withFullWeChatLogin();
		}
		// #endif
	},
	methods: {
		// 检查表单参数
		checkForm() {
			if (!this.agent[0]) {
				TaToast.error('请同意协议！')
				return false
			} else if (!/^1\d{10}$/.test(this.form.phone)) {
				TaToast.error('手机号错误！')
				return false
			} else {
				return true
			}
		},
		// 显示拼图验证
		showImageVerify() {
			if (!this.checkForm()) return;
			if (this.verify.time < 1) {
				this.showImageVerifyModal = true
			}
		},
		// 显示倒计时
		showTimeout(time: number) {
			this.verify.time = time;
			this.verify.tips = '获取验证码'
			if (this.verify.idxs) {
				clearInterval(this.verify.idxs)
			}
			if (this.verify.time < 1) return;
			this.verify.tips = this.verify.time + ' 秒后重试'
			this.verify.idxs = setInterval(() => {
				if (--this.verify.time > 0) {
					this.verify.tips = this.verify.time + ' 秒后重试'
				} else {
					this.showTimeout(0)
				}
				TaCache.set('LoginSmsTimeout', this.verify.time)
			}, 1000);
		},
		// 协议状态切换
		agentChange(state: boolean) {
			this.agent.splice(0, 1, state)
		},
		// 尝试发送短信验证码
		doSend(verify: string) {
			if (!this.checkForm()) return
			if (this.verify.time > 0) {
				return TaToast.error(`请 ${this.verify.time} 秒后重试`)
			}
			// 发送短信验证码
			TaDataUser.verify.send({ phone: this.form.phone, verify: verify }).then((ret: any) => {
				this.showTimeout(ret.data.time), TaToast.success(ret.info)
			}).catch(() => {
				this.verify.time = 0
				this.verify.tips = '获取验证码'
			});
		},
		// 执行注册登录
		doBind() {
			if (!this.checkForm()) return;
			if (!/^\d{6}$/.test(this.form.verify)) {
				TaToast.error('验证码错误！')
				return false
			}
			TaDataUser.bind(this.form)
		}
	},
})
</script>

<style lang="scss">
page,
m-login-wxapp,
uni-page-body {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #5555FF;
}

.login {
	flex: 3;
	height: 100%;
	display: flex;
	padding: 100rpx 80rpx;
	letter-spacing: 0.5rpx;
	flex-direction: column;

	&-head {
		flex: 1;

		&-h1 {
			color: rgba(255, 255, 255, 0.9);
			font-size: 44rpx;
			line-height: 80rpx;
			font-weight: bold;
			letter-spacing: 2rpx;
		}

		&-h2 {
			color: rgba(255, 255, 255, 0.8);
			font-size: 30rpx;
			line-height: 60rpx;
		}
	}

	&-body {
		flex: 4;
		display: flex;
		padding-top: 80rpx;
		flex-direction: column;
		justify-content: center;

		&-name {
			color: wheat;
			font-size: 36rpx;
			line-height: 3em;
			font-weight: bold;
		}

		&-item {
			padding: 0 50rpx;
			padding: 30rpx 50rpx;
			margin-top: 30rpx;
			border-radius: 100rpx;
			background-color: rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
		}

		&-label {
			color: wheat;
			display: flex;
			white-space: nowrap;
			align-items: center;
		}
	}

	&-foot {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		&-agent {
			color: var(--tn-color-primary);
		}
	}
}
</style>